<template>
  <div class="w-400px bg-white pb-44px box-border rounded-16px">
    <div class="relative w-400px h-400px rounded-tl-16px rounded-tr-16px overflow-hidden group">
      <div class="w-400px h-400px">
        <img
          class="w-400px h-400px object-cover transition-all group-hover:scale-103"
          :src="imgList[activeIndex]"
        /><!----><!---->
      </div>
      <!-- <button class="absolute right-8px bottom-12px w-36px h-36px">
        <div class="relative w-full h-full">
          <img src="@/assets/audio1.png" alt="audio" class="w-full h-full" /><img
            src="@/assets/audio2.png"
            alt="audio"
            class="absolute inset-0 w-full h-full"
          />
        </div>
      </button> -->
    </div>
    <div class="mt-8px px-8px box-border w-full h-72px flex flex-row items-center">
      <img
        src="@/assets/to-right1.png"
        alt="to left"
        class="mr-4px w-24px h-72px cursor-pointer rotate-180 swiper-button-prev"
      />
      <div class="w-328px h-72px">
        <Swiper
          :modules="[Navigation]"
          :slides-per-view="1"
          :space-between="0"
          :navigation="navigation"
          @slideChange="handleSildeChange"
        >
          <swiper-slide v-for="(imgList, index) in imgListWithSplice" :key="index">
            <div class="w-328px h-72px flex flex-row px-4px box-border">
              <div class="w-full h-72px flex">
                <div
                  class="relative w-72px h-72px overflow-hidden cursor-pointer rounded-12px group mx-4px"
                  v-for="(item, idx) in imgList"
                  :key="idx"
                >
                  <img
                    class="w-72px h-72px rounded-12px transition-all group-hover:scale-105"
                    :src="item"
                    style="height: 72px"
                  />
                  <div
                    :class="[
                      'absolute inset-0 border-[2px] border-#6B39FF rounded-12px opacity-0 transition-all',
                      activeIndex === index * 4 + idx && '!opacity-100'
                    ]"
                    @click="handleActiveImg(index, idx)"
                  ></div>
                </div>
              </div>
            </div>
            <!---->
          </swiper-slide>
        </Swiper>
      </div>
      <img
        src="@/assets/to-right1.png"
        alt="to right"
        class="ml-4px w-24px h-72px cursor-pointer swiper-button-next"
      />
    </div>
    <div class="mt-24px ml-18px text-20px font-bold text-#333333">简介</div>
    <div class="mt-18px ml-18px w-324px text-14px text-#333333">
      {{ info?.profile }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
const handleActiveImg = (index1, index2) => {
  activeIndex.value = index1 * 4 + index2
}
const props = defineProps(['info'])
const imgList = computed(() => {
  if (props?.info?.photo_album) {
    return props.info?.photo_album.split(',')
  } else {
    return [props?.info?.header_img]
  }
})
const imgListWithSplice = computed(() => {
  const imgLineCount = 4
  let arr = []
  imgList.value.forEach((img, index) => {
    const idx = Math.floor(index / imgLineCount)
    if (!arr[idx]) arr[idx] = []
    arr[idx].push(img)
  })
  return arr
})
const activeIndex = ref(0)
const handleSildeChange = (e) => {
  activeIndex.value = e.activeIndex * 4
}
const navigation = ref({
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev'
})
</script>

<style></style>
